<template>
    <div class="swiperPanel">
       <div class="repair">
            <countTo :startVal="0" :endVal="8" :duration="5000" />
            <p>当日检测数</p>       
       </div>
        <div class="repair">
            <countTo :startVal="0" :endVal="18" :duration="5000" />
            <p>本月检测数</p>       
       </div>
        <div class="repair">
            <countTo :startVal="0" :endVal="118" :duration="5000" />
            <p>今年检测数</p>       
       </div>
        <div class="repair">
            <countTo :startVal="0" :endVal="100" :duration="5000" />
            <p>累计检测数</p>       
       </div>
    </div>
</template>
<script>
import countTo from "vue-count-to";
export default {
     components: {
    countTo,
  },
}
</script>
<style lang="scss" scoped>
.swiperPanel{
display:flex;
height:100%;
.repair{
           box-sizing: border-box;
           height:100%;
           text-align:center;
            font-size: 14px;
           color: rgb(106, 159, 250);
           display: flex;
           flex-direction: column;
           justify-content: center;
       span{
           font-size: 24px;
           color: #f0ca61;
           margin-bottom:5px;
       }
   }
   }
</style>